<template>
	<div>
		<layout-base :loading="loading">
			<crumb title="上传学生作品" :routes="crumb"></crumb>
			<pannel>
				<h3 class="mb-10">上传学生作品</h3>
				<p class="gray mb-30">单张图片建议不超过<b class="primary">500Kb</b>。</p>
				<div class="input-wraper">
					<label><span class="danger">*</span> 作品名称</label>
					<input placeholder="请输入" />
				</div>
				<div class="input-wraper">
					<label><span class="danger">*</span> 所属分类</label>
					<div class="flex">
						<select v-model="worksInfo.classifyId">
							<option v-for="(v, i) in classify" :key="i" :value="v._id">{{v.name}}</option>
						</select>
						<span class="btn gradient-primary form-select-btn" @click="showAddClassify = true">创建分类</span>
					</div>
				</div>
				<div class="input-wraper">
					<label>作品简述</label>
					<textarea v-model="worksInfo.summary"></textarea>
				</div>
				<div class="input-wraper">
					<label>作品详情</label>
					<mavon-editor v-model="editorContent" :toolbars="editorToolbars"/>
				</div>
				<div class="mt-30">
					<span class="btn gradient-primary pointer">确认上传</span>
					<span class="btn ml-20 pointer" @click="$router.go(-1)">取消</span>
				</div>
			</pannel>
		</layout-base>
		<addClassify-modal
			v-model="showAddClassify"
			title="分类"
			:items="classify"
			@delete="onClassifyDelete"
			@add="onClassifyAdd"
			@change="onClassifyChange"
		>
		</addClassify-modal>
	</div>
</template>

<script>
	import addClassifyModal from '@/components/modal/classify-modal'
	export default{
		components: {
			'addClassify-modal': addClassifyModal
		},
		data(){
			return{
				crumb:[
					{label:'学生作品', url:'/works/list'}
				],
				loading: false,
				worksInfo:{
					classifyId: 1,
					summary: ''
				},
				showAddClassify: false,
				classify: [
					{_id:1, name: 'UI设计'},
					{_id:2, name: '平面设计'}
				],
				editorContent: '',
				editorToolbars: {
					bold: true,
					header: true,
					quote: true,
					ol: true,
					ul: true,
					link: true,
					imagelink: true,
					code: true,
					table: true,
					readmodel: true,
					htmlcode: true,
					help: true,
					alignleft: true, // 左对齐
					aligncenter: true, // 居中
					alignright: true, // 右对齐
					subfield: true, // 单双栏模式
					preview: true, // 预览
				}
			}
		},
		methods:{
			onClassifyDelete(i){
				var _works = this
				this.$Confirm({
					title: `确认删除 [${this.chapters[i].name}] 吗`,
					content: '删除后该分类的内容会保留，仅删除该分类！',
					onConfirm(){
						_works.classify.splice(i, 1)
					}
				})
			},
			onClassifyAdd(name){
				this.classify.push({_id:4, name})
			},
			onClassifyChange({e, i}){
				this.classify[i].name = e.target.value
			}
		}
	}
</script>

<style lang="scss">
.form-select-btn{
	flex: 0 0 100px;
	margin-left: 20px;
}
</style>
